<template>
 <div class="dashboard-editor-container">
   
    <div v-show="status === 'DOWN'">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span style="color: #409EFF;font-size: 20px">扫码授权接入微信小程序</span>
        </div>
        <div class="text item">
          <ul>
            <li>1、一个微信小程序仅可授权给一个我们的小程序。</li>
            <li>2、为保证所有功能的正常使用，授权时请保持默认选择，把权限统一授权给我们。</li>
            <li>3、新授权的小程序需与已授权的小程序及公众号主体一致；</li>
            <li>4、如果你的小程序已经授权给其他平台，请前往微信公众平台（设置→第三方授权管理→停止授权）解除授权。</li>
            <li>5、如果你在授权的授权接入出现问题，请及时联系我们，我们协助您授权。</li>

          </ul>
        </div>
        <div class="text item">
          <li style="color: #F56C6C">如果你在还没有注册小程序，可以参考教程自行注册，或联系我们协助您注册。</li>
        </div>
        <div class="text item" style="text-align: center;"  >
          <el-button type="primary"  @click="goto_auth_url()" >
              扫码授权接入
            </el-button>
        </div>
      </el-card>
    </div>
    <div v-if="status != 'DOWN'">
      <panel-group @handleSetLineChartData="handleSetLineChartData" :panel-data="panelData"></panel-group>
      <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
        <line-chart :chart-data="lineChartData"></line-chart>
      </el-row>
   </div>
 </div>
</template>

<script>
import PanelGroup from '@/components/PanelGroup'
import LineChart from '@/components/LineChart'
import API from '@/api'


export default {
  name: 'dashboard',
  data () {
    return {
      lineChartData: {
          lineData: [0, 0, 0, 0, 0, 0, 0],
          xData:["20180512","20180513","20180514","20180515","20180516","20180517","20180518"],
          nameData:'最近七日打开次数'
        },
      lineData:{
        open:{
          lineData: [0, 0, 0, 0, 0, 0, 0],
          xData:["20180512","20180513","20180514","20180515","20180516","20180517","20180518"],
          nameData:'最近七日打开次数'
        },
        new:{
          lineData: [0, 0, 0, 0, 0, 0, 0],
          xData:["20180512","20180513","20180514","20180515","20180516","20180517","20180518"],
          nameData:'最近七日新增用户数'
        },
        number:{
          lineData: [0, 0, 0, 0, 0, 0, 0],
          xData:["20180512","20180513","20180514","20180515","20180516","20180517","20180518"],
          nameData:'最近七日访问人数'
        },
        time:{
          lineData: [0, 0, 0, 0, 0, 0, 0],
          xData:["20180512","20180513","20180514","20180515","20180516","20180517","20180518"],
          nameData:'最近七日人均停留时长'
        },
      },
      status:'DOWN',
      app_id:'',
      panelData: {
        item1:{
          type:'open',
          name:'昨日打开次数',
          value:'0'
        },
        item2:{
          type:'new',
          name:'昨日新用户数',
          value:'0'
        },
        item3:{
          type:'number',
          name:'昨日访问人数',
          value:'0'
        },
        item4:{
          type:'time',
          name:'昨日人均停留时长',
          value:'0'
        },
      }
    }
  },
  methods: {
    
    getStatus(){
      API.miniapp.getStatus().then(({data}) => {
        if (data.code === 0) {
          console.log(data)
          this.status = data.status.value;
             if(this.status != 'DOWN'){
                this.get_overview()
              }
        }
      })
    },
    goto_auth_url(){
       API.miniapp.getAuthUrl().then(({data}) => {
        if (data.code === 0) {
          window.location.href = data.url;
        }
      })
    },
    get_overview(){
       API.common.getOverview().then(({data}) => {
          if (data.code === 0) {
            this.panelData = data.panelData
            this.lineChartData = data.lineChartData.open
            this.lineData = data.lineChartData
          } else {
            this.$message({
              type: 'warning',
              message: data.msg
            })
          }
      })
    },
    handleSetLineChartData(type) {
      this.lineChartData = this.lineData[type]
    }
  },
  created(){
    this.app_id = this.$cookie.get('appid')
    this.getStatus()
  },
  components:{
    PanelGroup,
    LineChart
  }
}
</script>
